<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>9.Promise解决回调地狱</title>
		<script type="text/javascript" src="./axios.js"></script>
		<script type="text/javascript" src="./jquery.js"></script>
	</head>
	<body>
		<!-- 
				需求：第一次请求成功，再发第二次，第二次成功，再发第三次。
				层层嵌套的回调函数，就是回调地狱。
		-->
		<button id="btn">点我</button>

		<script type="text/javascript" >
			let btn = document.getElementById('btn')
			//准备好三个请求地址
			let url1 = 'http://49.232.112.44/api/product/getBaseCategoryList'
			let url2 = 'http://49.232.112.44/api/product/getBaseCategoryList'
			let url3 = 'http://49.232.112.44/api/product/getBaseCategoryList'

			btn.onclick = ()=>{
				//发送第一次请求
				axios.get(url1)
				.then(
					response => {
						console.log('成功了1',response.data)
						//发送第二次请求
						return axios.get(url2)
					},
					error => {
						console.log('失败了1',error)
						return new Promise(()=>{})
					}
				)
				.then(
					response => {
						console.log('成功了2',response.data)
						return axios.get(url3)
					},
					error => {
						console.log('失败了2',error)
						return new Promise(()=>{})
					}
				)
				.then(
					response => {
						console.log('成功了3',response.data)
					},
					error => {
						console.log('失败了3',error)
					}
				)
			}
		</script>
	</body>
</html>